<template>
	<view class="center-phone">
		<view class="play-box">
			<view class="tab-list">
				<u-tabs :list="list" font-size="28" active-color="#1A1A1A" inactive-color="#999999" :is-scroll="false" :current="current"
				 bar-width="110" @change="change">
				</u-tabs>
			</view>
			<view class="me-skill">
				<block class="" v-if="current == 0">
					<view class="f32 pt30" style="color: #1A1A1A;font-weight: 600;">
						选择技能
					</view>
					<view class="center-box-p ">
						<view class="fiex-check" v-for="(item, index) in listFrom" :key="index">
							<image @longtap="longtapRemove" class="w100 h100" :src="item.img"></image>
							<view class="mt20 f26">
								{{item.name}}
							</view>
							<!-- <u-checkbox v-model="item.value" shape="circle" active-color="#000" @change="checkboxGroupChange" :name="index">
							</u-checkbox> -->
							
							<u-radio-group active-color="#000" v-model="value" @change="checkboxGroupChange">
								<u-radio :name="item.id"></u-radio>
							</u-radio-group>
							
							<!-- <u-radio-group v-model="value">
								<u-radio active-color="#AFB3F1" :name="item.id"></u-radio>
							</u-radio-group> -->



						</view>
					</view>
					<view class="price-order">
						<view class="flex justify-between align-center h100 u-border-bottom">
							<view class="flex align-center">
								<image src="../../static/img/priceinfo.png" class="w48 h48 mr15" mode=""></image>
								<text class="f28" style="color: #666;">接单价格</text>
							</view>
							<view class="f28" @click="showPrice = true">
								<text>{{priceVal}}星/次</text>
								<i class="cuIcon-right ml15"></i>
							</view>
						</view>

						<view class="flex justify-between align-center h100 ">
							<view class="flex align-center">
								<image src="../../static/img/jieshao.png" class="w48 h48 mr15" mode=""></image>
								<text class="f28" style="color: #666;">技能介绍</text>
							</view>
							<view class="f24">
								<!-- <text>喜欢聊天的小伙伴可以约哦</text> -->
								<input type="text" v-model="userInfoText" placeholder="请输入~" placeholder-style="font-size: 24rpx;"/>
							</view>
						</view>
					</view>


					<view class=" text-center" style="margin: 300rpx auto 0rpx;">
						<button type="default" class="cu-btn w620 h100 f30 r50"
							style="background-color: #000000; color: #FFFFFF;"
							@click="addPlay">
							发布
						</button>
					</view>
				</block>
				<block v-else v-for="(item, index) in mePalyList" :key="index">
					<view class="flex justify-between align-center mb23 pt30" style="font-weight: 600;">
						<view class="">
							{{item.kindName}}
						</view>
						<view class="" >
							<u-switch @change="switeTab(item)" 
								:active-value="item.id"
								active-color="#40C6A8"
								inactive-color="#CCCCCC"
								v-model="item.val" >
							</u-switch>
						</view>
					</view>
					<view class="price-order">
						<view class="flex justify-between align-center h100 u-border-bottom">
							<view class="flex align-center">
								<image src="../../static/img/priceinfo.png" class="w48 h48 mr15" mode=""></image>
								<text class="f28" style="color: #666;">接单价格</text>
							</view>
							<view class="f28">
								<text>{{item.price}}星/次</text>
							</view>
						</view>

						<view class="flex justify-between align-center h100 ">
							<view class="flex align-center">
								<image src="../../static/img/jieshao.png" class="w48 h48 mr15" mode=""></image>
								<text class="f28" style="color: #666;">技能介绍</text>
							</view>
							<view class="f28">
								<text>{{item.memo}}</text>

							</view>
						</view>
					</view>
				</block>
			</view>
		</view>




		<u-select v-model="showPrice" :list="listPrice" value-name="id" label-name="price" @confirm="confirmAdd"></u-select>






	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '免费相册',
				action: '',
				check: 2,
				img: [{
					img: '../../static/img/chat.png',
					name: '聊天'
				}, {
					img: '../../static/img/eat.png',
					name: '吃饭'
				}, {
					img: '../../static/img/travel.png',
					name: '旅行'
				}, {
					img: '../../static/img/movie.png',
					name: '看电影'
				}, {
					img: '../../static/img/wine.png',
					name: '健身'
				}, {
					img: '../../static/img/jiujiu.png',
					name: '喝酒'
				}],
				list: [{
					name: '陪玩'
				}, {
					name: '我的技能'
				}],
				current: 0,
				switchChecked: false,
				showPrice: false,
				listFrom: [],
				listPrice: [],
				priceVal: '',
				userInfoText: '',
				mePalyList: [],
				value: '',
			}
		},
		onLoad(e) {
			console.log('e.classText==>', e.classText);
			if (e.classText == 8) {
				this.title = '付费相册'
			} else {
				this.title = '免费相册'
			}

			this.getList()
			this.getListPrice()
			// this.getMePalyList()
		},
		methods: {
			checkboxGroupChange(e) {
				console.log(e);
				this.value = e
			},

			longtapRemove(e) {
				this.check = 1
				console.log('e==>', e);
			},

			change(index) {
				this.current = index;
				this.mePalyList = []
				this.getMePalyList()
			},

			confirmAdd(e) {
				
				this.priceInfo = e[0].value
				this.priceVal = e[0].label
				console.log(this.priceInfo)
			},

			async getList() {
				const res = await this.$u.get('api/user/play/kind')
				this.listFrom = res.data
			},
			
			
			async getListPrice() {
				const res = await this.$u.get('api/user/play/price')
				this.listPrice = res.data
			},
			
			async getMePalyList() {
				const res = await this.$u.get('api/user/play/mePlay')
				res.data.forEach( (item => {
					if (item.status) {
						item.val = true
					} else {
						item.val = false
					}
				}))
				this.mePalyList = res.data
			},
			
			async addPlay() {
				var listId = '';
				var name = ''
				this.listFrom.forEach( (item => {
					if (item.value) {
						listId = item.id
						name = item.name
					}
				}))
				if(this.priceInfo == '' || this.value == '') return this.l.msgg('请选择技能和价格!')
				const res = await this.$u.post('api/user/play/addPlay',{
						id: uni.getStorageSync('userInfo').id,
						// id: this.value,
						memo: this.userInfoText,
						playKindId: this.value,
						playPriceId: this.priceInfo,
						status: 1,
						uid: uni.getStorageSync('userInfo').id,
				})
				this.l.msgg(res.msg)
				
				if(res.code == 200) {
					this.getMePalyList()
				} else {
					this.l.msgg(res.msg)
				}
			},
			
			async switeTab(item) {
				const res = await this.$u.put(`api/user/play/status/${item.id}`)
				this.l.msgg(res.msg)
				if(res.code == 200) {
					this.getMePalyList()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
		background-color: #F9F7FA;
	}

	.center-phone {

		.play-box {
			.center-box-p {
				padding: 30rpx 0rpx 0 0rpx;
				display: flex !important;
				justify-content: space-between;
				flex-wrap: wrap;

				.fiex-check {
					width: 200rpx;
					height: 200rpx;
					position: relative;
					text-align: center;
					border-radius: 20rpx;
					margin-bottom: 39rpx;
					background-color: #FFFFFF;

					image {
						margin-top: 25rpx;
					}

					.u-checkbox {
						position: absolute;
						top: 10rpx;
						right: -10rpx;
					}
					
					.u-radio-group {
						position: absolute;
						top: 10rpx;
						right: -10rpx;
					}
				}
			}
		}

		.me-skill {
			width: 100%;
			padding: 0rpx 30rpx 200rpx;
			background-color: #F9F7FA;


			.price-order {
				padding: 0 26rpx;
				border-radius: 20rpx;
				background-color: #FFFFFF;
			}
		}
	}
</style>
